<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div id="app">
        <ul>
            <!-- v-for建议搭配key
            key属性必须是唯一的值
            方便vue的就地更新策略的实施 -->
            <li v-for="item of list" :key=item.id>
                <span>ID：{{item.id}}:</span>
                <span>name: {{item.name}}:</span>
                <span>score: {{item.score}}:</span>
            </li>
        </ul>
        <!-- 遍历对象 -->
        <!-- 遍历对象的顺序，会按照object.keys的结果遍历 -->
        <ul>
            <li v-for="(value,key,index) of privateInfo" :key='index'>
                <span>{{index}}</span>
                <span>{{key}}:</span>
                <template v-if="key==='hobbies'">
                    <ul>
                        <li v-for="(itme ,index) of value" :key="index">
                            <span>{{index+1}}:</span>
                            <span>{{itme}}:</span>
                        </li>
                    </ul>
                </template>
                <template v-else>
                    <span>{{value}}:</span>

                </template>
            </li>
        </ul>
        <!-- 计算属性与v-for -->
        <ul>
            <li v-for="item of computedList" :key="item.id">
                <span>ID：{{item.id}}:</span>
                <span>name: {{item.name}}:</span>
                <span>score: {{item.score}}:</span>
                <span :style="{color:item.pass?'green':'red'}">score: {{item.pass?'pass':'failed'}}:</span>
            </li>
        </ul>
        <!-- method -->
        <ul v-for="numbers of myArray">
            <li v-for="item of even(numbers)">
                {{item}}
            </li>
        </ul>
        <!-- 值范围 -->
        <div>
            <span v-for='s in 5' :key='s' :style="{color:s<=starNum?'orange':'grey'}" @click="setStarNum(s)">*</span>
        </div>
        <!-- template与v-for -->
        <ul>
            <template v-for="item of list">
                <li >
                    name:{{item.name}}
                </li>
            </template>
        </ul>
    </div>
    <script type="text/javascript">
        /**
         * v-for=""
         * 指令表达式 ->(item,index) in/of list
         * index 可选项-> item in/of list
         * 
         * in/of 都可以使用 数组|对象
         * 
         * 在vue中两者都是一套定义方法
         * js枚举对象或者遍历概念里 语义化
         * for in  对象属性枚举
         * for of  可迭代对象枚举
         * 
         * 遍历可迭代对象  for of （itme，index）
         * 枚举对象属性    for in  （value，key，index）
         * 
         **/
        var vm = new Vue({

            el: '#app',
            data() {
                return {
                    list: [{
                        id: 1,
                        name: 'Mike',
                        score: 89
                    }, {
                        id: 2,
                        name: 'Cike',
                        score: 39
                    }, {
                        id: 3,
                        name: 'Dike',
                        score: 99
                    }],
                    privateInfo: {
                        name: 'fsdf',
                        age: 18,
                        height: 122,
                        weight: 110,
                        hobbies: [12, 34, 2134, 12]
                    },
                    myArray: [
                        [1, 2, 3],
                        [2, 432, 32],
                        [4, 55, 678]
                    ],
                    starNum: 1
                }
            },
            computed: {
                computedList() {
                    return this.list.map(item => {
                        item.pass = item.score >= 60;
                        return item
                    })
                }
            },
            mounted() {

            },
            methods: {
                even(numbers) {
                    return numbers.filter(number => number % 2 === 0)
                },
                setStarNum(num) {
                    this.starNum = num;
                }
            }
        })
    </script>
</body>

</html>